<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>源码智慧校园</title>
    <!-- 设置页面图标 -->
<link rel="shortcut icon" href="../asserts/images/logo_small.jpg">
<!-- 引入bootstrap和bootstrap-icons的css -->
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
<!-- 引入自己页面的css -->
<link rel="stylesheet" href="../asserts/css/student.css">
<!-- 引入jquery和bootstrap的js -->
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../asserts/js/student.js"></script>
<script src="../node_modules/jquery-form/dist/jquery.form.min.js"></script>
<script src="../asserts/js/common.js"></script>
</head>
<body>
    <header class="container-fiuld border-bottom border-5 bg-light" style=height:80px > 
  <div class="container h-100 d-flex justify-content-between align-items-center" >
    <!-- 中间左边 -->
     <div class="d-flex align-items-center justify-content-between "  >
        <img src="../asserts/images/logo_small.jpg" alt="log" style="height: 60px;">
        <div class="fs-4  ms-3 ">源码智慧校园</div>
     </div>
     <!-- 中间右边 -->
     <div class="d-flex justify-content-between align-items-center">
          <img src="../asserts/images/head.jpg" alt="log" style="height: 50px;">
          <div class="m-3">
            <div class="dropdown">
                <button type="button" class="btn   dropdown-toggle" data-bs-toggle="dropdown">
                  张三
                </button>
                <ul class="dropdown-menu ">
                  <li><a class="dropdown-item" href="#">链接 1</a></li>
                  <li><a class="dropdown-item" href="#">链接 2</a></li>
                  <li><a class="dropdown-item" href="#">链接 3</a></li>
                </ul>
              </div>
          </div>
     </div>
  </div>
    </header>
    <main >
        <!-- 总共大的 -->
      <div class="row " >
          <!-- 左边的小的大概占了3 -->
          <div class="col-md-3 border-end  border-3 " style="min-height: 100vh;" >
            <ul class="nav flex-column d-flex align-items-center nav-underline fs-5">
                <div class=" border-bottom border-2 d-flex justify-content-center ms-2" style="width: 100%;" >
                <li class="nav-item ">
                  <a class="nav-link " aria-current="page" href="index.html">首页</a>
                </li>
            </div>
            <div class=" border-bottom border-2 d-flex justify-content-center  ms-2"  style="width: 100%;">
                <li class="nav-item " >
                  <a class="nav-link" href="teacher.html"  >教师信息管理</a>
                </li>
            </div>
            <div class=" border-bottom border-2 d-flex justify-content-center  ms-2 "  style="width: 100%;">
                <li class="nav-item ">
                  <a class="nav-link" href="#">学生信息管理</a>
                </li>
            </div>
              </ul>
          </div>
             <!-- 右边的小的大概占了9 -->
          <div class="col-md-9 ">
             <!-- 右边上面一个div -->
             <div  style="margin-top: 20px;">
             <div class="d-flex justify-content-between">
                <div class="input-group " style="width: 250px;" >
                    <span class="input-group-text" id="basic-addon1"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control" placeholder="搜索..." aria-label="Username" aria-describedby="addon-wrapping">
                  </div>
                  <div style="margin-right: 80px;">
                 <button type="button" class="btn btn-success add">新增</button>
                <button type="button" class="btn btn-info mx-2">导入</button>
                <button type="button" class="btn btn-info">导出</button>
            </div>
             </div>
            </div>
             <!-- 右边下面 -->
             <div style="margin-top: 20px;">
                <table class="table table-striped table-hover  table-bordered table-sm text-center">
                    <thead >
                      <tr>
                        <th scope="col">编号</th>
                        <th scope="col">姓名</th>
                        <th scope="col">性别</th>
                        <th scope="col">年份</th>
                        <th scope="col">操作</th>
                      </tr>
                    </thead>
                    <tbody >
                      <!-- <tr >
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm">修改</button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-warning btn-sm"> 删除</button>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">2</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td >
                            <button type="button" class="btn btn-primary btn-sm">修改</button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-warning btn-sm"> 删除</button>
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">3</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td>@mdo</td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm">修改</button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-warning btn-sm"> 删除</button>
                        </td>
                      </tr> -->
                    </tbody>
                  </table>
             </div>
          </div>
      </div>
       <!-- 模态框 -->
    <div class="modal" id="myModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加或修改</h5>
            <button type="button" class="btn-close closeModal" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="form">
              <input type="hidden" name="id">
              <div class="mb-3 d-flex align-items-center">
                <div class="col-md-2 text-center" style="margin-top: 10px;"><label for="name" class="form-label">姓名：</label></div>
                <div class="col-md-10"><input type="text" class="form-control" id="name" placeholder="请输入姓名..." name="name"></div>
              </div>
              <div class="mb-3 d-flex align-items-center">
                <div class="col-md-2 text-center " style="margin-top: 10px;"><label for="sex" class="form-label">性别：</label></div>
                <div class="col-md-10">
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sex" id="sex" value="男">
                    <label class="form-check-label" for="sex">男</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sex" id="sex" value="女">
                    <label class="form-check-label" for="sex">女</label>
                  </div>     
                </div>       
            </div>
              <div class="mb-3 d-flex align-items-center">
                <div class="col-md-2 text-center" style="margin-top: 10px;"><label for="address" class="form-label">地址：</label></div>
                <div class="col-md-10"><input type="text" class="form-control" id="address" placeholder="请输入地址..." name="address"></div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary closeModal" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary save">保存</button>
          </div>
        </div>
      </div>
    </div>   
    </main>
</body>
</html>